// =====================
// 最简单的 Service Worker
// 功能：缓存图片和视频文件
// 特点：超详细注释，适合新手
// =====================

// 1. 定义缓存名称和版本
// 每次修改代码后，更新这个版本号可以强制刷新缓存
const CACHE_NAME = 'my-site-cache-v3';

// 2. 安装 Service Worker 时执行
// 这个事件只会在第一次访问页面或 Service Worker 更新时触发
self.addEventListener('install', function(event) {
  
  // event.waitUntil() 确保 Service Worker 在完成操作前不会进入下一步
  event.waitUntil(
    
    // 打开一个缓存空间
    caches.open(CACHE_NAME)
      .then(function(cache) {
        
        // 只缓存最核心的文件（首页和样式）
        // 注意：这里不缓存图片/视频，因为它们太大
        return cache.addAll([
          '/index.html',  // 缓存HTML文件
          '/styles.css',  // 缓存CSS文件
        ]);
      })
  );
});

// 3. 拦截网页的所有网络请求
self.addEventListener('fetch', function(event) {
  
  // 获取当前请求的URL
  const requestUrl = new URL(event.request.url);
  
  // 4. 只处理图片请求
  // 这里检查URL是否包含 '/Static/'
  if (requestUrl.pathname.includes('/Static/')) {
    
    // 处理这个请求
    event.respondWith(
      
      // 5. 首先检查缓存中是否有这个文件
      caches.match(event.request)
        .then(function(response) {
          
          // 情况A：如果缓存中有这个文件
          if (response) {
            // 直接从缓存返回文件（超快！）
            return response;
          }
          
          // 情况B：如果缓存中没有
          // 从网络获取原始请求
          return fetch(event.request)
            .then(function(networkResponse) {
              
              // 6. 重要：复制一份响应
              // 因为网络响应只能使用一次
               if (networkResponse.status === 200) { // 只缓存完整响应
                const responseToCache = networkResponse.clone();
                
                // 7. 打开缓存
                caches.open(CACHE_NAME)
                  .then(function(cache) {
                    
                    // 将新获取的文件存入缓存
                    // 这样下次访问时就能从缓存加载
                    cache.put(event.request, responseToCache);
                  });
               }
              // 返回原始网络响应给网页
              return networkResponse;
            })/* 
            .catch(function(error) {
              // 8. 网络请求失败时的处理
              // 可以返回一个备用图片/视频
              if (requestUrl.pathname.includes('/images/')) {
                return caches.match('/images/fallback.png');
              }
              if (requestUrl.pathname.includes('/videos/')) {
                return caches.match('/videos/fallback.mp4');
              }
            }); */
        })
    );
  } 
  // 4. 只处理视频请求
  // 这里检查URL是否包含 /Video/'
  else if (requestUrl.pathname.includes('/Video/')) {
    
    // 处理这个请求
    event.respondWith(
      
      // 5. 首先检查缓存中是否有这个文件
      caches.match(event.request)
        .then(function(response) {
          
          // 情况A：如果缓存中有这个文件
          if (response) {
            // 直接从缓存返回文件（超快！）
            return response;
          }
          
          // 情况B：如果缓存中没有
          // 从网络获取原始请求
          // 创建新的请求对象（去除 Range 头）
          const newHeaders = new Headers(event.request.headers);
          newHeaders.delete('Range'); // 关键：删除 Range 头
          
          const newRequest = new Request(event.request.url, {
            method: 'GET',
            headers: newHeaders,
            mode: 'cors',
            credentials: 'omit'
          });
          return fetch(newRequest)
            .then(function(networkResponse) {
              
              // 6. 重要：复制一份响应
              // 因为网络响应只能使用一次
              if (networkResponse.status === 200) { // 只缓存完整响应
                const responseToCache = networkResponse.clone();
                
                // 7. 打开缓存
                caches.open(CACHE_NAME)
                  .then(function(cache) {
                    
                    // 将新获取的文件存入缓存
                    // 这样下次访问时就能从缓存加载
                    cache.put(event.request, responseToCache);
                  });
              }
              // 返回原始网络响应给网页
              return networkResponse;
            })/* 
            .catch(function(error) {
              // 8. 网络请求失败时的处理
              // 可以返回一个备用图片/视频
              if (requestUrl.pathname.includes('/images/')) {
                return caches.match('/images/fallback.png');
              }
              if (requestUrl.pathname.includes('/videos/')) {
                return caches.match('/videos/fallback.mp4');
              }
            }); */
        })
    );
  }
  /* else {
    // 9. 对于其他类型请求（HTML、CSS、JS等）
    // 直接访问网络，不缓存
    event.respondWith(fetch(event.request));
  } */
});

// 10. (可选) 清理旧缓存
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          // 删除所有不是当前版本的缓存
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});